﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SubCategory.aspx.cs" Inherits="ShopFine.SubCategory" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row">

        <%--<aside class="span3">

            <div class="categories">
                <div class="titleHeader clearfix">
                    <h3>Categories</h3>
                </div>
                <!--end titleHeader-->
                <ul class="unstyled">
                    <asp:Repeater runat="server" ID="rptCategories" OnItemDataBound="rptCategories_ItemDataBound">
                        <ItemTemplate>
                            <li>
                                <asp:HyperLink ID="hplCateLink" CssClass='<%# IsSelected(Eval("ID").ToString()) %>' runat="server" Text='<%# Eval("Name") %>'></asp:HyperLink>
                                <ul class="submenu" runat="server" visible='<%# (Eval("SubCategories") as ICollection<ShopFine.Models.SubCategory>).Count > 0 ? true: false %>'>
                                    <asp:Repeater runat="server" ID="rptSubCates">
                                        <ItemTemplate>
                                            <li>
                                                <asp:HyperLink ID="hplSubCateLink" CssClass='<%# IsSubSelected(Eval("ID").ToString()) %>' NavigateUrl='<%# "~/SubCategory.aspx?id=" + Eval("ID") %>' Text='<%# Eval("Name") + " (" + (Eval("Products") as ICollection<ShopFine.Models.Product>).Count.ToString()  + ")" %>' runat="server"></asp:HyperLink>
                                            </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <!--end categories-->

            <div class="pro-range-slider">
                <div class="titleHeader clearfix">
                    <h3>Shop By Price</h3>
                </div>
                <!--end titleHeader-->
                <div class="price-range">
                    <p class="clearfix">
                        <label>Price:</label>
                        <input type="text" id="amount">
                    </p>
                    <div id="slider-range"></div>
                </div>
            </div>
            <!--end pro-range-slider-->


            <div class="special">
                <div class="titleHeader clearfix">
                    <h3>Special</h3>
                </div>
                <!--end titleHeader-->

                <ul class="vProductItemsTiny">
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the title here
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                            <ul class="rating">
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                            </ul>
                        </div>
                    </li>
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the designer portfolio
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                            <ul class="rating">
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                            </ul>
                        </div>
                    </li>
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the designer portfolio
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                            <ul class="rating">
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                            </ul>
                        </div>
                    </li>
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the designer portfolio
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--end special-->

        </aside>--%>
        <!--end aside-->


        <div class="span12">

            <div class="titleHeader clearfix">
                <h3>
                    <asp:Literal runat="server" ID="titleSubCategory"></asp:Literal></h3>
                <div class="pagers">
                </div>
            </div>
            <%--<div id="productSlider" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item">
                        <img src="img/694x240.jpg" alt="">
                    </div>
                    <div class="item">
                        <img src="img/694x240.jpg" alt="">
                    </div>
                    <div class="item">
                        <img src="img/694x240.jpg" alt="">
                    </div>
                </div>

                <!-- Carousel nav -->
                <a class="carousel-control left" href="#productSlider" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#productSlider" data-slide="next">&rsaquo;</a>
            </div>--%>
            <!--end productSlider-->

            <div class="productFilter clearfix">

                <div class="sortBy inline pull-left">
                    Sort By
							<select name="sortItem">
                                <option value="Default">Default</option>
                                <option value="">Name (A-A)</option>
                                <option value="">Name (Z-A)</option>
                                <option value="">Price (Low-Hight)</option>
                                <option value="">Price (Height-Low)</option>
                                <option value="">Highest Rating</option>
                                <option value="">Lowest Rating</option>
                                <option value="">Model (A-Z)</option>
                                <option value="">Model (Z-A)</option>
                            </select>
                </div>

                <div class="showItem inline pull-left">
                    Show
							<select name="showItem">
                                <option value="15">15</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="75">75</option>
                                <option value="100">100</option>
                            </select>
                </div>
                <!--end sortBy-->

                <div class="compareItem inline pull-left">
                    <button class="btn">Product Compare (4)</button>
                </div>
                <!--end compareItem-->

                <div class="displaytBy inline pull-right">
                    Display
							<div class="btn-group">
                                <button class="btn btn-primary active"><i class="icon-th"></i></button>
                                <button class="btn"><i class="icon-list"></i></button>
                            </div>
                </div>
                <!--end displaytBy-->

            </div>
            <!--end productFilter-->


            <div class="row">
                <ul class="hProductItems clearfix">
                    <asp:Repeater ID="rptProducts" runat="server">
                        <ItemTemplate>
                            <li class="span3 clearfix">
                                <div class="thumbnail">
                                    <a id="A1" runat="server" href='<%# "~/ProductDetail.aspx?id=" + Eval("ID")  %>'>
                                        <asp:Image ID="Image1" Width="212px" Height="192px" runat="server" ImageUrl='<%# Eval("ImageUrl") ?? "img/372x370.jpg" %>' />
                                    </a>
                                </div>
                                <div class="thumbSetting">
                                    <div class="thumbTitle">
                                        <a id="A2" runat="server" class="invarseColor" href='<%# "~/ProductDetail.aspx?id=" + Eval("ID")  %>'><%# Eval("Name") %> </a>
                                    </div>
                                    <div class="thumbPrice">
                                        <span><%# Eval("Price","{0: $#,##0}") %></span>
                                    </div>
                                    <div class="thumbButtons">
                                        <button class="btn btn-primary btn-small" data-placement="top" data-title="+To Cart" rel="tooltip">
                                            <i class="icon-shopping-cart"></i>
                                        </button>
                                        <button class="btn btn-small" data-placement="top" data-title="+To WishList" rel="tooltip">
                                            <i class="icon-heart"></i>
                                        </button>
                                        <button class="btn btn-small" data-placement="top" data-title="+To Compare" rel="tooltip">
                                            <i class="icon-refresh"></i>
                                        </button>
                                    </div>
                                    <ul class="rating">
                                        <li><i class="star-on"></i></li>
                                        <li><i class="star-on"></i></li>
                                        <li><i class="star-on"></i></li>
                                        <li><i class="star-on"></i></li>
                                        <li><i class="star-off"></i></li>
                                    </ul>
                                </div>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <!--end row-->

            <div class="pagination pagination-right">
                <span class="pull-left">Showing 9 of 20 pages:</span>
                <ul>
                    <li><a class="invarseColor" href="#">Prev</a></li>
                    <li class="active"><a class="invarseColor" href="#">1</a></li>
                    <li><a class="invarseColor" href="#">2</a></li>
                    <li><a class="invarseColor" href="#">2</a></li>
                    <li><a class="invarseColor" href="#">3</a></li>
                    <li><a class="invarseColor" href="#">Next</a></li>
                </ul>
            </div>
            <!--end pagination-->

        </div>
        <!--end span9-->

    </div>
    <!--end row-->
</asp:Content>
